/*4.2.1 导航条
Name:			mod_nav
Example:
<header class="navbar-wrapper">
<nav class="nav navbar-nav nav-collapse" role="navigation" id="Hui-navbar">
	<ul class="cl">
		<li class="current"><a href="/">首页</a></li>
		<li><a href="#">核心</a></li>
		<li><a href="#">扩展</a></li>
		<li class="dropDown dropDown_hover"><a href="#" class="dropDown_A">一级导航 <i class="Hui-iconfont">&#xe6d5;</i></a>
			<ul class="dropDown-menu menu radius box-shadow">
				<li><a href="#">二级导航</a></li>
				<li><a href="#">二级导航<i class="arrow Hui-iconfont">&#xe6d7;</i></a>
					<ul class="menu">
						<li><a href="javascript:;">三级菜单<i class="arrow Hui-iconfont">&#xe6d7;</i></a>
							<ul class="menu">
								<li><a href="javascript:;">四级菜单</a></li>
								<li><a href="javascript:;">四级菜单</a></li>
								<li><a href="javascript:;">四级菜单</a></li>
							</ul>
						</li>
						<li><a href="#">三级导航</a></li>
					</ul>
				</li>
				<li><a href="#">二级导航</a></li>
				<li class="disabled"><a href="javascript:;">二级菜单</a></li>
			</ul>
		</li>
		<li><a href="#">联系我们</a></li>
	</ul>
</nav>
</header>
Explain: 鼠标经过状态a:hover，当前选中状态li:current。
*/


/*导航条*/

.navbar-wrapper {
  height: 45px
}

.navbar {
  position: relative;
  z-index: 1030;
  background-color: #fff;
  .container {
      position: relative;
      .navbar-userbar {
          right: 0px
      }
  }
}

.navbar-black {
  background-color: #222;
}

.navbar-fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}


/*logo*/

.logo {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 100%
}

a.logo:hover {
  text-decoration: none
}

.navbar .logo {
  height: 44px;
  line-height: 44px;
  margin-right: 10px;
  float: left
}

.navbar-logo,
.navbar-logo-m {
  font-size: 16px;
}

.navbar-slogan {
  font-size: 12px;
  cursor: default;
}

/*导航*/
.nav {
  z-index: 1;
  > ul {
      font-size: 0;
      line-height: 0;
      >li {
          position: relative;
          float: left;
          text-align: center;
          >a {
              display: inline-block;
              text-align: center;
              padding: 0 20px;
          }
          >a:hover,
          &.current>a {
              background-color: rgba(255, 255, 255, 0.2);
              text-decoration: none;
              -webkit-transition: background-color 0.3s ease 0s;
              -moz-transition: background-color 0.3s ease 0s;
              -o-transition: background-color 0.3s ease 0s;
              -ms-transition: background-color 0.3s ease 0s;
              transition: background-color 0.3s ease 0s
          }
      }
      >li,
      >li > a {
          line-height: 44px;
          font-size: 14px
      }
  }
}


@media (max-width: 767px) {
  .navbar-wrapper {
      height: 45px!important
  }
  .logo {
      margin-right: 0
  }
  .navbar .logo {
      height: 44px!important;
      line-height: 44px!important
  }
  .navbar-nav {
      display: none;
      float: none!important;
      > ul > li {
          width: 100%;
          text-align: left;
          border-bottom: solid 1px #eee;
          >a {
              display: block;
              padding: 0 15px;
              text-align: left
          }
          &.dropDown.open>.dropDown-menu {
              display: none
          }
          &.dropDown>.dropDown_A>.Hui-iconfont {
              display: none
          }
      }
      > ul > li,
      > ul > li >a {
          height: 44px!important;
          line-height: 44px!important
      }
  }

  .nav-collapse>ul,
  .nav-collapse>ul>li {
      width: 100%;
      display: block
  }
  .js-nav-active .nav-collapse {
      position: absolute;
      display: block;
      float: none;
      clear: both;
      max-height: 0;
      clip: rect(0 0 0 0);
      margin-left: -15px;
      margin-right: -15px;
      overflow: hidden;
      -webkt-transition: max-height 284ms ease 0s;
      -moz-transition: max-height 284ms ease 0s;
      -o-transition: max-height 284ms ease 0s;
      -ms-transition: max-height 284ms ease 0s;
      transition: max-height 284ms ease 0s;
      &.closed {
          max-height: none
      }
  }
  .nav-collapse.opened {
      max-height: 9999px
  }
}


/*导航条风格-黑色*/

.navbar-black {
  background-color: #222;
  border-bottom: #080808 1px solid;
  -moz-box-shadow: 0 0 4px #333333;
  -webkit-box-shadow: 0 0 4px #333333;
  box-shadow: 0 0 4px #333333;
  .logo {
      color: #fff
  }
  .navbar-logo-m {
      color: #eee
  }
  .navbar-userbar {
      color: #fff;
  }
  .navbar-nav{
      > ul > li,
      > ul > li > a{
          color: #fff;
      }
      > ul > li > a:hover,
      > ul > li.current > a {
          color: #fff;
      }
  }
}

@media (max-width: 767px) {
  .navbar-black .navbar-nav>ul>li {
      border-bottom: solid 1px #222;
      > a:hover,
      &.current>a {
          background: #777;
      }
  }
}


/*面包导航*/

.nav-toggle,
a.nav-toggle {
  position: absolute;
  top: 0px;
  right: 15px;
  font-size: 20px;
  color: #999;
  padding: 6px 11px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  &:hover {
      text-decoration: none;
      color: #fff
  }
}

/*2.1.9 版本之前的导航条代码*/

.mainnav {
  z-index: 1;
  background-color: #222;
  >ul {
      font-size: 0;
      line-height: 0;
      >li {
          display: inline-block;
          color: #fff;
          font-size: 14px;
          font-weight: bold
      }
      >li,
      >li>a {
          height: 40px;
          line-height: 40px;
      }
      /*链接颜色*/
      >li>a {
          display: inline-block;
          padding: 0 20px;
          color: #fff;
          text-align: center
      }

      /*交互颜色*/
      >li>a:hover,
      >li.current>a {
          color: #fff;
          text-decoration: none;
          background-color: #000;
          -webkit-transition: background-color 0.3s ease 0s;
          -moz-transition: background-color 0.3s ease 0s;
          -o-transition: background-color 0.3s ease 0s;
          -ms-transition: background-color 0.3s ease 0s;
          transition: background-color 0.3s ease 0s
      }
  }
}

.Hui-nav-toggle,
a.Hui-nav-toggle {
  position: absolute;
  top: 0px;
  right: 15px;
  font-size: 20px;
  color: #999;
  padding: 6px 11px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  &:hover {
      text-decoration: none;
      color: #fff
  }
}

@media (max-width: 767px) {
  .mainnav>ul>li {
      font-size: 1.125em
  }
}

@media (max-width: 480px) {
  .mainnav>ul>li {
      text-align: center;
      width: 20%;
      >a {
          padding: 0;
          padding: 0;
          display: block
      }
  }
}


/*4.2.2 面包屑导航
Name:			mod_breadcrumb
Example:
<nav class="breadcrumb">
<div class="container">
  <i class="Hui-iconfont">&#xe67f;</i> <a href="/" class="c-primary">首页</a><span class="c-gray en">&gt;</span><a href="#">组件</a><span class="c-gray en">&gt;</span><span class="c-gray">当前页面</span>
</div>
</nav>
*/

.breadcrumb {
  border-bottom: 1px solid #E5E5E5;
  line-height: 39px;
  height: 39px;
  overflow: hidden;
  span {
      padding: 0 5px
  }
}

@media (max-width: 767px) {
  .breadcrumb>.container {
      padding: 0
  }
}


/*4.2.3 翻页导航
Name:			mod_pageNav
Example:		<div class="pageNav" id="pageNav"></div>
Explain:		需要调用pagenav.cn.js

*/

.pageNav {
  float: none;
  clear: both;
  font-size: 0;
  font-family: Arial, Helvetica, sans-serif;
  padding: 18px 0;
  text-align: center;
  span,
  a,
  b {
      font-size: 14px;
      margin-right: 5px;
      overflow: hidden;
      padding: 3px 8px
  }
  a {
      border: 1px solid #CCDBE4;
      cursor: pointer
  }
  b {
      color: #000
  }
  .mor {
      padding: 3px;
      font-weight: bold
  }
}

/*4.2.4 顶部导航
Name:			mod_topnav
Sample:
<div class="topnav"><div class="cl"><div class="l">您好，欢迎来到Hui！</div><div class="r"><span class="r_nav">[ <a rel="nofollow" href="javascript:login();">登录</a> ]</span><span class="pipe">|</span><span class="r_nav">[ <a href="javascript:register();" rel="nofollow">注册</a> ]</span><span class="pipe">|</span><span class="r_nav"><a title="收藏" href="javascript:addFavorite();">收藏本站</a></span><span class="pipe">|</span><span class="r_nav"><a href="javascript:void(0)" onclick="setHome(this);" title="设为首页">设为首页</a></span></div></div></div>

*/

.topnav {
  height: 30px;
  line-height: 30px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #EBEBEB;
  font-size: 12px;
}

.topbar {
  background-color: #ECECEC;
  border-bottom: 1px solid #ddd;
  a {
      margin-right: 5px
  }
}

.r_nav {
  display: inline-block;
  color: #999
}


/*4.2.5 向导
Name:			mod_steps
Sample:
<div class="four steps">
  <span class="step">第一步</span>
  <span class="active step">第二步</span>
  <span class="disabled step">第三步</span>
  <span class="disabled step">第四步</span>
</div>
*/

.steps,
.steps .step {
  display: inline-block;
  position: relative;
  padding: 1em 2em 1em 3em;
  vertical-align: top;
  background-color: #FFF;
  color: #888;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: opacity .1s ease,
  color .1s ease,
  -webkit-box-shadow .1s ease;
  transition: opacity .1s ease,
  color .1s ease,
  box-shadow .1s ease;
  &:after{
      position: absolute;
      z-index: 2;
      content: '';
      top: 0;
      right: -1.45em;
      border-bottom: 1.5em solid transparent;
      border-left: 1.5em solid #FFF;
      border-top: 1.5em solid transparent;
      width: 0;
      height: 0;
      -webkit-transition: opacity .1s ease,color .1s ease, -webkit-box-shadow .1s ease;
      transition: opacity .1s ease,color .1s ease,box-shadow .1s ease;
  }
}


.steps {
  cursor: pointer;
  font-size: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
  border-radius: .3125rem;
  line-height: 1;
  .step:first-child {
      padding-left: 1.35em;
      border-radius: .3125em 0 0 .3125em;
  }
  .step:last-child {
      border-radius: 0 .3125em .3125em 0
  }
  .step:only-child {
      border-radius: .3125em
  }
  .step:last-child {
      margin-right: 0
  }
  .step:last-child:after {
      display: none
  }
  .step:hover,
  .step.hover {
      background-color: #F7F7F7;
      color: rgba(0, 0, 0, .8);
      &:after {
          border-left-color: #F7F7F7
      }
  }

  .step.down,
  .step:active {
      background-color: #F0F0F0;
      &:after{
          border-left-color: #F0F0F0;
      }
  }
  .step.active {
      cursor: auto;
      background-color: #428BCA;
      color: #FFF;
      font-weight: 700;
      &:after {
          border-left-color: #428BCA
      }
  }
  .step.disabled {
      cursor: auto;
      background-color: #FFF;
      color: #CBCBCB;
      &:after {
          border: 0;
          background-color: #FFF;
          top: .42em;
          right: -1em;
          width: 2.15em;
          height: 2.15em;
          -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
          box-shadow: -1px -1px 0 0 rgba(0, 0, 0, .1) inset
      }
  }
}


.attached.steps {
  margin: 0;
  border-radius: .3125em .3125em 0 0;
  .step:first-child {
      border-radius: .3125em 0 0
  }
  .step:last-child {
      border-radius: 0 .3125em 0 0
  }
}

.bottom.attached.steps {
  margin-top: -1px;
  border-radius: 0 0 .3125em .3125em;
  .step:first-child {
      border-radius: 0 0 0 .3125em;
  }
  .step:last-child {
      border-radius: 0 0 .3125em
  }

}

/*向导数量*/

.one.steps,
.two.steps,
.three.steps,
.four.steps,
.five.steps,
.six.steps,
.seven.steps,
.eight.steps {
  display: block
}

.one.steps>.step {
  width: 100%
}

.two.steps>.step {
  width: 50%
}

.three.steps>.step {
  width: 33.333%
}

.four.steps>.step {
  width: 25%
}

.five.steps>.step {
  width: 20%
}

.six.steps>.step {
  width: 16.666%
}

.seven.steps>.step {
  width: 14.285%
}

.eight.steps>.step {
  width: 12.5%
}


/*向导尺寸*/

.small.step,
.small.steps .step {
  font-size: .8rem
}


/*小*/

.step,
.steps .step {
  font-size: 1rem
}


/*默认*/

.large.step,
.large.steps .step {
  font-size: 1.25rem
}


/*大*/


/*兼容写法
Sample:
<div class="steps-ie cl">
  <a class="step-ie active" href="#">第一步<em class="arrow"></em></a>
  <a class="step-ie" href="#">第二步<em class="arrow"></em></a>
  <a class="step-ie" href="#">第三步<em class="arrow"></em></a>
</div>
*/

.steps-ie,
.step-ie,
.step-ie .arrow {
  height: 44px;
  line-height: 44px
}

.steps-ie {
  background-color: #eaf4fd;
  border: solid 1px #afcfcc
}

.step-ie {
  position: relative;
  float: left;
  cursor: pointer;
  padding: 0 20px 0 40px;
  background: url(../images/steps/step_bg.png) repeat-x 0 center
}

.step-ie .arrow {
  position: absolute;
  right: -21px;
  top: 0;
  width: 21px;
  height: 44px;
  display: block;
  cursor: pointer;
  background: url(../images/steps/step_arrow.png) no-repeat 0 center;
  z-index: 50
}

.step-ie.active {
  background-image: url(../images/steps/step_bg-active.png);
  color: #fff;
  z-index: 100
}

.step-ie.active .arrow {
  background-image: url(../images/steps/step_arrow-active.png)
}


/*4.2.6 竖向导向tab导航
Sample:
<div class="verticalTab">
  <a class="" href="#">导航一<em></em></a>
  <a class="active" href="#">导航二<em></em></a>
  <a href="#">导航三<em></em></a>
  <a href="#">导航四<em></em></a>
</div>
*/

.verticalTab {
  background: #fff url(../images/verticalTab/tab_bg.png) repeat-y 0 0;
  width: 38px;
  a {
    position: relative;
    display: block;
    width: 18px;
    height: auto;
    text-align: center;
    position: relative;
    padding: 26px 10px 6px 10px;
    background: url(../images/verticalTab/tabNav.png) no-repeat 0 0;
    &.active {
        background-image: url(../images/verticalTab/tabNav-active.png);
        color: #fff;
        z-index: 99;
        em {
            background-image: url(../images/verticalTab/tabNav_right-active.png)
        }
    }
  }
  em {
    position: absolute;
    left: 0;
    bottom: -20px;
    width: 38px;
    height: 20px;
    background: url(../images/tabNav_right.png) no-repeat 0 0;
    z-index: 50
  }
}


/*4.2.6 横向导向tab导航
Sample:
<ul class="acrossTab">
  <li>导航一<i></i><em></em></li>
  <li class="active">导航二<i></i><em></em></li>
  <li>导航三<i></i><em></em></li>
</ul>
*/

.acrossTab,
.acrossTab li,
.acrossTab li em {
  background-image: url(../images/acrossTab/acrossTab-bg.png)
}

.acrossTab {
  height: 29px;
  background-repeat: repeat-x;
  background-position: 0 0;
  padding-top: 1px;
  li {
    position: relative;
    float: left;
    height: 29px;
    line-height: 29px;
    font-size: 12px;
    cursor: pointer;
    padding: 0 30px;
    white-space: nowrap;
    color: #282828;
    background-position: 0 0;
    em {
      position: absolute;
      width: 23px;
      height: 29px;
      right: -20px;
      top: 0;
      z-index: 50;
      background-position: right -30px;
  }
    &:hover {
      background-position: 0 -60px;
      em {
        background-position: right -90px
      }
    }
    &.active {
      background-position: 0 -120px;
      z-index: 99;
      em {
        background-position: right -150px
      }
    }
    i {
      position: absolute;
      display: block;
      width: 13px;
      height: 13px;
      top: 50%;
      margin-top: -6px;
      right: 5px;
      font-size: 0;
      line-height: 0;
      cursor: pointer;
      background-image: url(../images/acrossTab/acrossTab-close.png);
      background-repeat: no-repeat;
      background-position: 0 0;
      &:hover {
        background-position: 0 bottom
      }
    }
  }
  li,
  li em {
    background-repeat: no-repeat;
    background-position: 0 0
}
}
